<template>
  <div>
    <div class="mb-20">
      <router-link to="/advert/topclassadd">
        <el-button>添加顶级广告分类</el-button>
      </router-link>
    </div>
    <el-tree
      :data="tree"
      :props="defaultProps"
      node-key="id"
      :expand-on-click-node="false"
      :default-expand-all="true"
      :render-content="renderContent">
    </el-tree>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import notify from '@/tools/notify'

  export default {
    data () {
      return {
        defaultProps: {
          children: '_child',
          label: 'name'
        }
      }
    },
    computed: {
      ...mapState({
        tree: state => state.advert.classTree
      })
    },
    created () {
      this.classTree()
    },
    methods: {
      // 获取广告分类树
      classTree () {
        this.$store.dispatch('advert/classTree')
      },
      // 分类树自定义控件
      renderContent (createElement, {node, data, store}) {
        const self = this
        return createElement('span', {
          attrs: {
            style: 'white-space: normal; width: 100%;'
          }
        }, [
          createElement('span', node.label),
          createElement('span', {
            attrs: {
              style: 'float: right; margin-right: 20px'
            }
          }, [
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: function () {
                  self.$store.commit('advert/ADVERT_SAVE_DATA', data)
                  self.$router.push('/advert/subclassadd')
                }
              }
            }, '添加子分类'),
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: function () {
                  if (data.pid === 0) {
                    self.$router.push({name: 'AdvertTopClassEdit', params: {id: data.id}})
                  } else {
                    self.$router.push({name: 'AdvertSubClassEdit', params: {id: data.id}})
                  }
                }
              }
            }, '编辑'),
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: function () {
                  let payload = {
                    id: data.id
                  }
                  self.$store.dispatch('advert/classStart', payload).then(res => {
                    self.classTree()
                    notify.success(res.msg)
                  })
                }
              }
            }, '启用'),
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: function () {
                  let payload = {
                    id: data.id
                  }
                  self.$store.dispatch('advert/classStop', payload).then(res => {
                    self.classTree()
                    notify.success(res.msg)
                  })
                }
              }
            }, '禁用'),
            createElement('el-button', {
              attrs: {
                size: 'mini'
              },
              on: {
                click: function () {
                  let payload = {
                    id: data.id
                  }
                  self.$store.dispatch('advert/classDel', payload).then(res => {
                    self.classTree()
                    notify.success(res.msg)
                  })
                }
              }
            }, '删除')
          ]),
          createElement('span', {
            attrs: {
              style: 'float: right; margin-right: 30px'
            }
          }, [createElement('span', '已' + data.status_text)])
        ])
      }
    }
  }
</script>
